<template>
	<!-- 提交订单中的订单详情 -->
	<view class="order">
		<view class="title">订单详情</view>
		<view class="food-list">
			<view class="food-item" v-for="item of dataList" :key="item">
				<view class="left">
					<image class="img" src="/static/images/food2.jpg" mode="aspectFill"></image>
					<view class="food-info">
						<text class="name">{{ item.name }}</text>
						<text class="desc">{{ item.desc }}</text>
						<text class="num">×{{ item.num }}</text>
					</view>
				</view>
				<view class="right">￥{{ item.amount }}</view>
			</view>
		</view>
		<view class="expenses">
			<view class="pack">
				<text class="text">打包费</text>
				<text class="price">￥{{ packAmount }}</text>
			</view>
			<view class="dis">
				<text class="text">配送费</text>
				<text class="price">￥{{ disAmount }}</text>
			</view>
			<view class="total">
				<text class="text">小计</text>
				<text class="price">￥{{ total }}</text>
			</view>
		</view>


	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useFoodList } from '../../stores/foodList';

const store = useFoodList();

// 商品列表
const dataList = ref([])

// 打包费用
const packAmount = ref(0)

// 配送费用
const disAmount = ref(0)

// 总价
const total = ref(0)

const emit = defineEmits(['total'])





// 获取商品数据
onMounted(() => {

	// 获取商品数据
	dataList.value = store.foodList

	// 商品品个数
	const dataListNum = dataList.value.reduce((prev, curr) => {
		return prev + curr.num
	}, 0)

	// 打包费=商品数量*1元
	packAmount.value = dataListNum * 1

	// 配送费=4元+商品数量*0.5元
	disAmount.value = 4 + dataListNum * 0.5

	// 商品总价
	const dataListPrice = dataList.value.reduce((prev, curr) => {
		// console.log(curr.amount);
		return prev + curr.amount
	}, 0)

	// 总价=商品总价+打包费+配送费
	total.value = packAmount.value + disAmount.value + dataListPrice
})

// 向父组件传递总价
onMounted(() => {
	emit('total', total.value)
})
</script>
<style scoped lang="scss">
.order {
	box-sizing: border-box;
	padding: 20rpx;
	background-color: #fff;
	width: 100%;
	border-radius: 20rpx;
	position: relative;

	.title {
		border-bottom: #ddd 1px solid;
		width: 100%;
		height: 75rpx;
		line-height: 75rpx;
	}

	.food-list {
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx;

		.food-item {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				flex-direction: row;
				gap: 20rpx;
				flex-grow: 1;

				.img {
					width: 130rpx;
					height: 130rpx;
					border-radius: 15rpx;
				}

				.food-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: 600;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width: 400rpx;
					}

					.desc {
						color: #999;
						font-size: 28rpx;
					}

					.num {}
				}
			}

			.right {
				margin-right: 30rpx;
				font-weight: 600;
			}
		}
	}

	.expenses {
		display: flex;
		gap: 20rpx;
		flex-direction: column;
		margin-top: 50rpx;
		border-top: #ddd 1px solid;
		padding-top: 30rpx;

		.pack,
		.dis {
			display: flex;
			justify-content: space-between;
			padding-left: 30rpx;
		}

		.total {
			margin-top: 20rpx;
			height: 80rpx;
			border-top: #ddd 1px solid;
			line-height: 75rpx;
			justify-content: flex-end;
			display: flex;
			gap: 20rpx;
		}

		.price {
			font-weight: 600;
			margin-right: 30rpx;
			// width: ;
		}
	}


}
</style>
<style></style>
